<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
    :okText="$t('保存')"
    :cancelText="$t('关闭')"
  >
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item :label="$t('设备编码')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="deviceId">
            <div>{{ model.deviceId }}</div>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item :label="$t('设备名称')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="name">
            <a-input v-model="model.name" :placeholder="$t('请输入设备名称')"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item :label="$t('管理状态')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="state">
            <j-dict-select-tag
              type="list"
              v-model="model.state"
              dictCode="bis_device_info.state"
              :placeholder="$t('请选择管理状态')"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type.indexOf('HZ') == 0 ||
            model.type.indexOf('T') == 0 ||
            model.type.indexOf('YP') > -1 ||
            model.type == 'EF100002' ||
            model.type == 'HTB08' ||
            model.type == 'GATE02' ||
            model.type == 'EF100003' ||
            model.type == 'EF100004' ||
            model.type == 'EF100005' ||
            model.type == 'EF100006'
          "
        >
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('绑定项目')">
            <a-select
              showSearch
              v-model="model.game"
              :placeholder="$t('请输入项目编码/名称')"
              :defaultActiveFirstOption="false"
              :showArrow="false"
              :filterOption="false"
              @search="getGameList"
              @change="handleChange"
            >
              <a-select-option
                v-for="d in gameList"
                :disabled="d.state == 'N'"
                :key="d.id"
                :value="d.id"
                :title="d.name"
                >{{ d.name
                }}<span v-if="d.state == 'N'" style="padding-left: 4px">{{ $t('禁用') }}</span></a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.type == 'EF100002' || model.type == 'HTB08'">
          <a-form-model-item
            style="margin-bottom: 5px"
            :label="$t('投币限额')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="onceCoinLimit"
          >
            <a-input-number v-model="model.onceCoinLimit" style="width: 100%" />
          </a-form-model-item>
          <span style="color: #edc360; margin: 0 20%">{{ $t('（会员单次投币限额，0表示不限制）') }}</span>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type.indexOf('HZ') == 0 ||
            model.type.indexOf('T') == 0 ||
            model.type == 'EF100003' ||
            model.type == 'EF100004' ||
            model.type == 'EF100005' ||
            model.type == 'EF100006'
          "
        >
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('应用模式')" prop="ktType">
            <j-dict-select-tag
              type="list"
              v-model="model.ktType"
              dictCode="bis_device_info.kt_type"
              :placeholder="$t('请选择')"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type.indexOf('HZ') == 0 ||
            model.type.indexOf('T') == 0 ||
            model.type == 'EF100003' ||
            model.type == 'EF100004' ||
            model.type == 'EF100005' ||
            model.type == 'EF100006'
          "
        >
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('二维码类型')" prop="qrType">
            <j-dict-select-tag
              type="list"
              v-model="model.qrType"
              dictCode="bis_device_info.qr_type"
              :placeholder="$t('请选择')"
            />
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type != 'P08' &&
            model.type != 'EF310004' &&
            model.type != 'EF300004' &&
            model.type != 'GATE02' &&
            model.type.indexOf('T') != 0 &&
            model.type.indexOf('YP') == -1 &&
            model.type != 'EF100002' &&
            model.type.indexOf('HZ') != 0 &&
            model.type.indexOf('HTB08') != 0 &&
            model.type != 'P09' &&
            model.type != 'EF100003' &&
            model.type != 'EF100004' &&
            model.type != 'EF100005' &&
            model.type != 'EF100006'
          "
        >
          <a-form-model-item :label="$t('实币仓库')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="currencyStore">
            <j-tree-select
              ref="treeSelect0"
              :placeholder="$t('请选择实币仓库')"
              v-model="model.currencyStore"
              dict="bis_goods_store,name,id"
              pidField="pid"
              pidValue="0"
              hasChildField="has_child"
            >
            </j-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type != 'P08' &&
            model.type != 'EF310004' &&
            model.type != 'EF300004' &&
            model.type != 'GATE02' &&
            model.type.indexOf('T') != 0 &&
            model.type.indexOf('YP') == -1 &&
            model.type != 'EF100002' &&
            model.type.indexOf('HZ') != 0 &&
            model.type.indexOf('HTB08') != 0 &&
            model.type != 'P09' &&
            model.type != 'EF100003' &&
            model.type != 'EF100004' &&
            model.type != 'EF100005' &&
            model.type != 'EF100006'
          "
        >
          <a-form-model-item
            style="margin-bottom: 5px"
            :label="$t('币报警值')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="coinAlert"
          >
            <a-input-number v-model="model.coinAlert" :placeholder="$t('请输入币报警值')" style="width: 100%" />
          </a-form-model-item>
          <span style="color: orange; margin: 0 20%">{{ $t('报警值设置为-1表示不使用报警功能') }}</span>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type != 'D08' &&
            model.type != 'B08' &&
            model.type != 'P08' &&
            model.type.indexOf('T') != 0 &&
            model.type.indexOf('YP') == -1 &&
            model.type != 'EF100002' &&
            model.type.indexOf('HZ') != 0 &&
            model.type != 'GATE02' &&
            model.type.indexOf('HTB08') != 0 &&
            model.type != 'P09' &&
            model.type != 'EF100003' &&
            model.type != 'EF100004' &&
            model.type != 'EF100005' &&
            model.type != 'EF100006'
          "
        >
          <a-form-model-item :label="$t('商品仓库')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="store">
            <j-tree-select
              ref="treeSelect1"
              :placeholder="$t('请选择商品仓库')"
              v-model="model.store"
              dict="bis_goods_store,name,id"
              pidField="pid"
              pidValue="0"
              hasChildField="has_child"
            >
            </j-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.type == 'EF300004' || model.type == 'EF310004'">
          <a-form-model-item :label="$t('绑定商品')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="goodsId">
            <a-select
              showSearch
              v-model="model.goodsId"
              :placeholder="$t('请输入商品编码/名称/条码')"
              :defaultActiveFirstOption="false"
              :showArrow="false"
              :filterOption="false"
              @search="getGoodsList"
            >
              <a-select-option
                v-for="d in goodsList"
                :key="d.id"
                :disabled="d.state == 'N'"
                :value="d.id"
                :title="d.name"
                >{{ d.name }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            (model.type.indexOf('HZ') == 0 ||
              model.type.indexOf('T') == 0 ||
              model.type.indexOf('YP') == 0 ||
              model.type == 'EF100002' ||
              model.type == 'EF100003' ||
              model.type == 'EF100004' ||
              model.type == 'EF100005' ||
              model.type == 'EF100006') &&
            outputType == 4
          "
        >
          <a-form-model-item :label="$t('绑定仓库')" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="store">
            <j-tree-select
              :placeholder="$t('请选择')"
              v-model="model.store"
              dict="bis_goods_store,name,id"
              pid-field="pid"
              pidValue="0"
              hasChildField="has_child"
            ></j-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col
          :span="24"
          v-if="
            model.type == 'ATM08' ||
            model.type == 'YJ_D06' ||
            model.type == 'EF310004' ||
            model.type == 'EF300004' ||
            model.type == 'P09'
          "
        >
          <a-form-model-item
            :label="$t('顶部轮播图')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            style="margin: 10px 0 0 0"
          >
            <j-upload v-model="model.pictureTop" fileType="image"></j-upload>
          </a-form-model-item>
          <span
            style="color: #edc360; margin: 0 0 0 20%"
            v-if="model.type == 'ATM08' || model.type == 'YJ_D06' || model.type == 'P09'"
          >
            {{ $t('（支持上传多张轮播图显示，建议尺寸宽1080*高743px，文件大小 < 500KB）') }}
          </span>
          <span style="color: #edc360; margin: 0 0 0 20%" v-else>
            {{ $t('（支持上传多张轮播图显示，建议尺寸宽1080*高1250px，文件大小 < 500KB）') }}
          </span>
        </a-col>
        <a-col :span="24" v-if="model.type == 'ATM08' || model.type == 'YJ_D06' || model.type == 'P09'">
          <a-form-model-item
            :label="$t('空闲广告')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            style="margin: 10px 0 0 0"
          >
            <j-upload v-model="model.pictureAds" fileType="image"></j-upload>
          </a-form-model-item>
          <span v-if="model.type == 'P09' || model.type == 'ATM08'" style="color: #edc360; margin-left: 20%">
            {{ $t('ads-suggest-size',{width: 1080,height: 1720})}}
          </span>
          <span v-else style="color: #edc360; margin-left: 20%">
            {{ $t('ads-suggest-size',{width: 1080,height: 1736})}}
          </span>
        </a-col>
        <!-- <a-col :span="24" v-if="model.type == 'ATM08'">
          <a-form-model-item
            :label="$t('底部广告图')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            style="margin: 10px 0 0 0"
          >
            <j-upload v-model="model.pictureBot" fileType="image" :multiple="false" :number="1"></j-upload>
          </a-form-model-item>
          <span style="color: #edc360; margin-left: 20%">
            {{ $t('（仅支持上传一张轮播图显示，建议尺寸宽1080*高280px，文件大小 < 500KB）') }}
          </span>
        </a-col> -->
        <a-col :span="24" v-if="model.type == 'EF310004'">
          <a-form-model-item
            :label="$t('第三方取货')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="allowThird"
            style="margin-top: 10px"
          >
            <j-dict-select-tag
              type="list"
              v-model="model.allowThird"
              dictCode="oc"
              :placeholder="$t('请选择第三方取货')"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.type != 'EF000000'">
          <a-form-model-item
            :label="$t('商家Logo')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="logoFlag"
            style="margin-top: 10px"
          >
            <j-dict-select-tag
              type="list"
              v-model="model.logoFlag"
              dictCode="is_display"
              :placeholder="$t('请选择是否显示商家Logo')"
            />
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.type != 'EF000000'">
          <a-form-model-item
            :label="$t('帮助功能')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="helpFlag"
            style="margin-top: 10px"
          >
            <j-dict-select-tag type="list" v-model="model.helpFlag" dictCode="is_display" :placeholder="$t('请选择')" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            :label="$t('备注')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="comment"
            style="margin-top: 10px"
          >
            <a-input v-model="model.comment" :placeholder="$t('请输入备注')"></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24" v-if="model.type == 'EF000000'">
          <a-form-model-item
            :label="$t('局域网IP')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="ip"
            style="margin-bottom: 5px"
          >
            <a-input v-model="model.ip" :placeholder="$t('请输入')"></a-input>
          </a-form-model-item>
          <span style="color: orange; margin: 0 20%">{{ $t('开启局域网IP变更授权和局域网IP锁定功能时使用') }}</span>
        </a-col>
        <a-col :span="24" v-if="model.type == 'EF000000'">
          <a-form-model-item
            :label="$t('MAC地址')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="mac"
            style="margin-bottom: 5px"
          >
            <a-input v-model="model.mac" :placeholder="$t('请输入')"></a-input>
          </a-form-model-item>
          <span style="color: orange; margin: 0 20%">{{ $t('开启MAC地址锁定功能时使用') }}</span>
        </a-col>
        <a-col :span="24" v-if="model.type == 'EF000000'">
          <a-form-model-item
            :label="$t('外网IP')"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="wip"
            style="margin-bottom: 5px"
          >
            <a-input v-model="model.wip" :placeholder="$t('请输入')"></a-input>
          </a-form-model-item>
          <span style="color: orange; margin: 0 20%">{{ $t('开启外网IP变更授权功能时使用') }}</span>
        </a-col>
      </a-row>
    </a-form-model>
  </j-modal>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'

export default {
  name: 'DeviceInfoModal',
  components: {},
  data() {
    return {
      title: '',
      width: 800,
      visible: false,
      disableSubmit: false,
      confirmLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        type: '',
      },
      validatorRules: {
        name: [{ required: true, message: this.$t('请输入设备名称') }],
        state: [{ required: true, message: this.$t('请选择管理状态') }],
        coinAlert: [{ required: true, message: this.$t('请输入币报警值') }],
        allowThird: [{ required: true, message: this.$t('请选择第三方取货') }],
        qrType: [{ required: true, message: this.$t('请选择二维码类型') }],
        ktType: [{ required: true, message: this.$t('请选择卡头模式') }],
        logoFlag: [{ required: true, message: this.$t('请选择是否显示商家Logo') }],
        helpFlag: [{ required: true, message: this.$t('请选择') }],
      },
      url: {
        add: '/device/bisDeviceInfo/add',
        edit: '/device/bisDeviceInfo/edit',
        queryById: '/device/bisDeviceInfo/queryById',
      },
      gameList: [],
      outputType: '',
      goodsList: [],
    }
  },
  methods: {
    add() {
      this.visible = true
      this.edit()
    },
    edit(record) {
      console.log(record.type)
      this.visible = true
      this.gameList = []
      this.goodsList = []
      this.outputType = ''
      this.getGameList()
      this.getGoodsList()
      if ((record.type == 'EF310004' || record.type == 'EF300004') && record.bisDeviceGoodsList.length > 0) {
        record.goodsId = record.bisDeviceGoodsList[0].goodsId
      }
      this.model = Object.assign({}, record)
      if (
        this.model.type == 'ATM08' ||
        this.model.type == 'YJ_D06' ||
        this.model.type == 'EF310004' ||
        this.model.type == 'EF300004' ||
        this.model.type == 'P09'
      ) {
        let list = [],
          listTwo = [],
          listThree = []
        this.model.deviceImageList.forEach((col) => {
          if (col.type == 1) {
            list.push(col.path)
          }
          if (this.model.type == 'ATM08' && col.type == 2) {
            listTwo.push(col.path)
          }
          if (
            (this.model.type == 'ATM08' || this.model.type == 'YJ_D06' || this.model.type == 'P09') &&
            col.type == 3
          ) {
            listThree.push(col.path)
          }
        })
        this.model.pictureTop = list.join(',')
        if (this.model.type == 'ATM08') {
          this.model.pictureBot = listTwo.join(',')
        }
        if (this.model.type == 'ATM08' || this.model.type == 'YJ_D06' || this.model.type == 'P09') {
          this.model.pictureAds = listThree.join(',')
        }
      }
    },
    handleChange(e) {
      this.gameList.forEach((item) => {
        if (item.id == e) {
          this.outputType = item.outputType
        }
      })
    },
    getGameList(info) {
      let that = this
      that.gameList = []
      let querydata = {}
      querydata.pageIndex = 1
      querydata.pageSize = 999
      querydata.gameInfo = info
      getAction('/game/bisGame/list', querydata).then((res) => {
        if (res.success) {
          that.gameList = res.result.records
          if (
            that.model.type.indexOf('HZ') == 0 ||
            that.model.type.indexOf('T') == 0 ||
            that.model.type.indexOf('YP') > -1 ||
            that.model.type == 'EF100002'
          ) {
            that.handleChange(that.model.game)
          }
        }
      })
    },
    handleOk() {
      let that = this
      // 触发表单验证
      that.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true
          let httpurl = ''
          let method = ''
          if (!that.model.id) {
            httpurl += that.url.add
            method = 'post'
          } else {
            httpurl += that.url.edit
            method = 'put'
          }
          let pictureTop = []
          let pictureBot = []
          let pictureAds = []
          if (that.model.pictureTop) {
            let list = []
            list = that.model.pictureTop.split(',')
            list.forEach((lt) => {
              let obj = {}
              obj.path = lt
              obj.type = 1
              pictureTop.push(obj)
            })
          }
          if (that.model.pictureBot) {
            let list = []
            list = that.model.pictureBot.split(',')
            list.forEach((lt) => {
              let obj = {}
              obj.path = lt
              obj.type = 2
              pictureBot.push(obj)
            })
          }
          if (that.model.pictureAds) {
            let list = []
            list = that.model.pictureAds.split(',')
            list.forEach((lt) => {
              let obj = {}
              obj.path = lt
              obj.type = 3
              pictureAds.push(obj)
            })
          }
          that.model.deviceImageList = pictureTop.concat(pictureBot, pictureAds)
          if (that.model.goodsId) {
            that.model.bisDeviceGoodsList = [{ goodsId: that.model.goodsId }]
          }
          httpAction(httpurl, that.model, method)
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
                that.close()
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
        }
      })
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.visible = false
    },
    getGoodsList(value) {
      let that = this
      let querydata = {}
      querydata.pageNo = 1
      querydata.pageSize = 200
      querydata.goodsInfo = value
      querydata.form = '1'
      getAction('/goods/bisGoodsInfor/list', querydata).then((res) => {
        if (res.success) {
          that.goodsList = res.result.records
        }
      })
    },
    changeGoods() {
      this.getGoodsList()
    },
  },
}
</script>